{template 'header'}
<style type="text/css">
.my-page {
    background-color:#f7f5f5;
}
.my-page .avatar-wrap {
    padding:28px;
    position:relative;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.my-page .avatar {
    width:70px;
    height:70px;
    border-radius:100%;
    overflow:hidden;
    margin-right:20px;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
}
.my-page .student-info {
    width:calc(100% - 140px);
}
.my-page .student-info .name {
    color:#fff;
    font-size:18px;
    font-weight:500;
}
.my-page .student-info .sno {
    color:#fff;
    margin-top:8px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .student-card {
    width:0.71rem;
    height:0.22rem;
    color:#FE5264;
    font-size:0.14rem;
    position:absolute;
    background-color:#FFF357;
    right:0;
    margin-top:-0.11rem;
    top:50%;
    border-top-left-radius:0.11rem;
    border-bottom-left-radius:0.11rem;
    padding-left:4px;
}
.my-page .student-card img {
    width:9px;
    height:9px;
    margin-left:2px;
}
.my-page .menu {
    margin-bottom:70px;
}
.my-page .menu ul a, .my-page .menu ul div {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:64px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:16px;
    background-color:#fff;
}
.my-page .menu ul a img, .my-page .menu ul div img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.my-page .menu ul a .arrow, .my-page .menu ul div .arrow {
    margin-right:15px;
}
.my-page .menu ul a:active {
    background:#ececec;
}
.my-page .menu ul .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:64px;
}
.my-page .menu ul .my-li-ctx .tab-new {
    width:39px;
    margin-left:8px;
    margin-top:-14px;
}
.my-page .menu ul .wallet-price {
    margin-right:8px;
    position:relative;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .menu ul .grow-balance {
    margin-right:8px;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.mem-my-page {
    background-color:#fff;
}
.mem-my-page .header {
    position:relative;
    height:200px;
}
.mem-my-page .header .my1 {
    height:200px;
    width:100%;
}
.mem-my-page .header .user-wrap {
    position:absolute;
    width:84%;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    top:73px;
}
.mem-my-page .header .user-wrap .my2 {
    width:100%;
    height:117px;
}
.mem-my-page .header .user-wrap .user-pic-wrap {
    position:absolute;
    width:50px;
    height:50px;
    left:50%;
    top:-35px;
    border-radius:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
}
.mem-my-page .header .user-wrap .user-pic-wrap .user-pic {
    width:100%;
    height:100%;
    border-radius:50%;
}
.mem-my-page .header .user-wrap .user-pic-wrap .crown {
    position:absolute;
    width:28px;
    left:9px;
    top:-20px;
}
.mem-my-page .header .user-wrap .user-name {
    position:absolute;
    top:24px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-weight:600;
    font-size:16px;
}
.mem-my-page .header .user-wrap .user-sno {
    position:absolute;
    top:46px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:15px;
}
.mem-my-page .header .user-wrap .endtime {
    position:absolute;
    top:70px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:12px;
}
.mem-my-page .header .content-top {
    position:absolute;
    bottom:0;
    height:35px;
    width:100%;
}
.mem-my-page .header .content-top img {
    width:100%;
    height:100%;
}
.mem-my-page .menu {
    background:#fff;
}
.mem-my-page .menu ul a {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:48px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:15px;
}
.mem-my-page .menu ul a img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.mem-my-page .menu ul a .arrow {
    margin-right:15px;
}
.mem-my-page .menu ul a:active {
    background:#ececec;
}
.mem-my-page .menu .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:44px;
}
.my-read-note-page .all-read-note .note-item {
    background-color:rgb(255, 255, 255);
    padding:30px 20px;
    margin:0px auto 1px;
    max-width:480px;
}
.my-read-note-page .all-read-note .note-item .note-head {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:18px;
}
.my-read-note-page .all-read-note .note-item .note-head p {
    color:rgb(74, 74, 74);
    font-size:14px;
    font-weight:bold;
    width:100%;
}
.my-read-note-page .all-read-note .note-item .note-content {
    background-color:rgb(246, 246, 246);
    padding:15px 12px;
    border-radius:10px;
    margin-bottom:17px;
}
.my-read-note-page .all-read-note .note-item .note-content pre {
    color:rgb(74, 74, 74);
    font-size:14px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-read-note-page .all-read-note .note-item .note-footer p {
    color:rgb(155, 155, 155);
    font-size:14px;
    text-align:right;
}
.my-read-note-page .all-read-note .note-item .note-footer div {
    color:rgb(155, 155, 155);
    font-size:14px;
    line-height:18px;
    position:relative;
}
.my-read-note-page .all-read-note .note-item .note-footer div img {
    width:16px;
    margin-right:8px;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block {
    width:30px;
    top:-40px;
    position:absolute;
    right:-5px;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block img {
    width:100%;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block span {
    position:absolute;
    top:0px;
    left:0px;
    color:rgb(255, 255, 255);
    display:inline-block;
    width:100%;
    text-align:center;
    line-height:17px;
    font-size:0.12rem;
}
.my-read-note-page .no-note {
    background-color:rgb(255, 255, 255);
    text-align:center;
    height:100vh;
}
.my-read-note-page .no-note img {
    width:240px;
    margin-top:60px;
}
.my-read-note-page .no-note .no-note-tip {
    color:rgb(74, 74, 74);
    font-size:19px;
    font-weight:bold;
    margin-top:25px;
}
.my-read-note-page .no-note .to-public-note {
    color:rgb(155, 155, 155);
    font-size:16px;
    margin-top:17px;
}
.my-read-note-page .no-note .public-btn {
    text-align:center;
    position:fixed;
    bottom:68px;
    left:0px;
    right:0px;
    margin:auto;
    max-width:400px;
}
.growthstar-page .header {
    width:100%;
    height:207px;
    padding:28px 32px;
    position:relative;
    background:linear-gradient(270deg, rgba(254, 81, 100, 1) 0%, rgba(254, 148, 111, 1) 100%);
    color:#fff;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    padding-top:0.53rem;
}
.growthstar-page .header .bg-pic {
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
}
.growthstar-page .header .header-top {
    position:relative;
}
.growthstar-page .header .header-top p {
    font-weight:500;
    line-height:20px;
}
.growthstar-page .header .header-top .detail {
    width:44px;
    height:18px;
    border-radius:3px;
    border:1px solid rgba(255, 255, 255, 0.8);
    font-size:0.12rem;
    margin-left:9px;
    line-height:18px;
}
.growthstar-page .header .header-top .detail:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .header-top .detail img {
    width:6px;
    height:9px;
    margin-left:2px;
}
.growthstar-page .header .avaible-count {
    font-size:48px;
    line-height:67px;
}
.growthstar-page .header .exchange-gift {
    width:144px;
    height:35px;
    box-shadow:0px 2px 16px 0px rgba(255, 0, 29, 0.23);
    border-radius:44px;
    border:1px solid rgba(255, 255, 255, 1);
    font-size:0.18rem;
    font-weight:500;
    line-height:25px;
    position:relative;
}
.growthstar-page .header .exchange-gift:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .exchange-gift img {
    width:18px;
    height:18px;
    margin-right:5px;
}
.growthstar-page .header .rules {
    width:84px;
    height:22px;
    background:rgba(255, 255, 255, 0.3);
    border-radius:11px 0px 0px 11px;
    text-align:center;
    position:absolute;
    top:18px;
    right:0;
    line-height:22px;
    font-size:0.12rem;
}
.growthstar-page .star-rechange {
    width:100%;
    height:96px;
    background:rgba(255, 255, 255, 1);
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .star-rechange .rechange-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .star-rechange .rechange-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .star-rechange .rechange-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .star-rechange .rechange-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task {
    width:100%;
    height:156px;
    background:rgba(255, 255, 255, 1);
    margin-top:12px;
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .task .title {
    font-size:0.16rem;
    color:#4a4a4a;
    line-height:22px;
    margin-bottom:26px;
    padding-left:14px;
}
.growthstar-page .task .task-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .task .task-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .task .task-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .task .task-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task .task-right img {
    width:68px;
}
.growthstar-page .more-tip {
    height:20px;
    font-size:0.14rem;
    color:rgba(155, 155, 155, 1);
    line-height:20px;
    text-align:center;
    margin-top:15px;
}
.growthstar-page .g-modal .content {
    padding:0;
}
.growthstar-page .dialog-content {
    text-align:left;
}
.growthstar-page .dialog-content .title {
    display:block;
    text-align:center;
    font-size:20px;
    color:rgba(29, 29, 29, 1);
    line-height:58px;
    height:58px;
    background:rgba(247, 247, 247, 1);
}
.growthstar-page .dialog-content .main {
    padding:0.2rem 0.28rem;
}
.growthstar-page .dialog-content p {
    color:#9b9b9b;
    line-height:26px;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    margin-bottom:8px;
}
.growthstar-page .dialog-content .black-color {
    color:#4a4a4a;
    margin-bottom:2px;
}
.growthstar-detail-page .item {
    width:100%;
    height:72px;
    background:rgba(255, 255, 255, 1);
    border-bottom:1px solid #eee;
    padding:20px 24px;
}
.growthstar-detail-page .item .item-left .icon {
    margin-right:15px;
}
.growthstar-detail-page .item .item-left .word .title {
    font-size:16px;
    ß color:rgba(74, 74, 74, 1);
    line-height:22px;
}
.growthstar-detail-page .item .item-left .word .time {
    font-size:12px;
    color:rgba(155, 155, 155, 1);
    line-height:17px;
}
.growthstar-page .header {
    width:100%;
    height:207px;
    padding:28px 32px;
    position:relative;
    background:linear-gradient(270deg, rgba(254, 81, 100, 1) 0%, rgba(254, 148, 111, 1) 100%);
    color:#fff;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    padding-top:0.53rem;
}
.growthstar-page .header .bg-pic {
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
}
.growthstar-page .header .header-top {
    position:relative;
}
.growthstar-page .header .header-top p {
    font-weight:500;
    line-height:20px;
}
.growthstar-page .header .header-top .detail {
    width:44px;
    height:18px;
    border-radius:3px;
    border:1px solid rgba(255, 255, 255, 0.8);
    font-size:0.12rem;
    margin-left:9px;
    line-height:18px;
}
.growthstar-page .header .header-top .detail:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .header-top .detail img {
    width:6px;
    height:9px;
    margin-left:2px;
}
.growthstar-page .header .avaible-count {
    font-size:48px;
    line-height:67px;
}
.growthstar-page .header .exchange-gift {
    width:144px;
    height:35px;
    box-shadow:0px 2px 16px 0px rgba(255, 0, 29, 0.23);
    border-radius:44px;
    border:1px solid rgba(255, 255, 255, 1);
    font-size:0.18rem;
    font-weight:500;
    line-height:25px;
    position:relative;
}
.growthstar-page .header .exchange-gift:active {
    background-color:rgba(255, 255, 255, 0.2);
}
.growthstar-page .header .exchange-gift img {
    width:18px;
    height:18px;
    margin-right:5px;
}
.growthstar-page .header .rules {
    width:84px;
    height:22px;
    background:rgba(255, 255, 255, 0.3);
    border-radius:11px 0px 0px 11px;
    text-align:center;
    position:absolute;
    top:18px;
    right:0;
    line-height:22px;
    font-size:0.12rem;
}
.growthstar-page .star-rechange {
    width:100%;
    height:96px;
    background:rgba(255, 255, 255, 1);
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .star-rechange .rechange-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .star-rechange .rechange-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .star-rechange .rechange-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .star-rechange .rechange-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task {
    width:100%;
    height:156px;
    background:rgba(255, 255, 255, 1);
    margin-top:12px;
    padding:24px 18px;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.02);
}
.growthstar-page .task .title {
    font-size:0.16rem;
    color:#4a4a4a;
    line-height:22px;
    margin-bottom:26px;
    padding-left:14px;
}
.growthstar-page .task .task-left img {
    width:47px;
    height:47px;
    margin-right:16px;
}
.growthstar-page .task .task-left p {
    font-size:0.16rem;
    color:#000;
    line-height:22px;
}
.growthstar-page .task .task-right div {
    width:90px;
    height:33px;
    background:linear-gradient(180deg, rgba(251, 210, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
    border-radius:17px;
    font-size:18px;
    font-weight:600;
    color:rgba(255, 255, 255, 1);
    line-height:33px;
    text-align:center;
}
.growthstar-page .task .task-right div:active {
    background:linear-gradient(180deg, rgba(227, 189, 62, 1) 0%, rgba(215, 144, 27, 1) 100%);
}
.growthstar-page .task .task-right img {
    width:68px;
}
.growthstar-page .more-tip {
    height:20px;
    font-size:0.14rem;
    color:rgba(155, 155, 155, 1);
    line-height:20px;
    text-align:center;
    margin-top:15px;
}
.growthstar-page .g-modal .content {
    padding:0;
}
.growthstar-page .dialog-content {
    text-align:left;
}
.growthstar-page .dialog-content .title {
    display:block;
    text-align:center;
    font-size:20px;
    color:rgba(29, 29, 29, 1);
    line-height:58px;
    height:58px;
    background:rgba(247, 247, 247, 1);
}
.growthstar-page .dialog-content .main {
    padding:0.2rem 0.28rem;
}
.growthstar-page .dialog-content p {
    color:#9b9b9b;
    line-height:26px;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    margin-bottom:8px;
}
.growthstar-page .dialog-content .black-color {
    color:#4a4a4a;
    margin-bottom:2px;
}
.read-book{
	color: rgba(254, 81, 100, 1);
	border:1px solid rgba(254, 81, 100, 1);
	text-decoration: none;
    padding: 3px 7px;
    border-radius:3px;
}
</style>
    <div class="growthstar-page">
        <div class="header g-flex col-center">
            <img src="{RES}img/scorebg.png" alt="" class="bg-pic">
            <div class="header-top g-flex row-center col-center">
                <p>可用成长星(个)</p>
                <div class="detail g-flex col-center row-center"><span onclick="location.href='{php echo $this->murl('log');}'">明细</span>
                    <img src="{RES}img/down2.png" alt="">
                </div>
            </div>
            <p class="avaible-count">{$mem['score']}</p>
            <div class="rules" onclick="showRule()">成长星规则</div>
        </div>
        <div class="star-rechange g-flex col-center row-between">
            <div class="rechange-left g-flex col-center">
                <img src="{RES}img/star_money.png" alt="">
                <p>充值成长星</p>
            </div>
            <div class="rechange-right">
                <div onclick="location.href='{php echo $this->murl('recharge')}'">去充值</div>
            </div>
        </div>
        {if $cfg['listen_star']>0}
        <div class="task">
            <p class="title g-sm-bar">每日任务</p>
            <div class="g-flex col-center row-between">
                <div class="task-left g-flex col-center">
                    <img src="{RES}img/list1.png" alt="">
                    <div>
                        <p>每天学习当天课程</p>
                        <p>获得{$cfg['listen_star']}个成长星</p>
                    </div>
                </div>
                <div class="task-right">
                	{if empty($has_listen)}
                    <a href="{php echo $this->murl('index')}" class="read-book">前往阅读</a>
                    {else}
                    <img src="{RES}img/finish.png" alt="">
                	{/if}
                </div>
            </div>
        </div>
        <p class="more-tip">更多任务即将开启，敬请期待</p>
        {/if}
        <div id="score-rule" class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="dialog-content">
                        <div class="title">成长星规则</div>
                        <div class="main">
                        {$cfg['score_rule']}
                        </div>
                    </div>
                </div>
                <div onclick="hideRule()" class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                </div>
            </div>
        </div>
    </div>
</div>    
{template 'loading'}
<script>
function showRule(){
	$('#score-rule').removeClass('g-hidden');
}
function hideRule(){
	$('#score-rule').addClass('g-hidden');
}
</script>
